<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(255, 255, 255, 1);
            margin: 0;
        }

        .sort {
            flex-wrap: nowrap;
            overflow-x: scroll;
            margin: 15px;
            margin-right: 0;
            height: 24px;
        }

        .sort-title {
            min-width: fit-content;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            margin-right: 10px;
            white-space: nowrap;
        }

        .sort-group {
            flex-wrap: nowrap;
            overflow-x: scroll !important;
        }

        .sort-item {
            min-width: fit-content;
            height: 24px;
            padding: 0 10px;
            margin: 0 5px;
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
            color: rgba(25, 25, 25, 1);
        }

        .sort-item.active {
            background: rgba(237, 248, 255, 1);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(90, 194, 255, 1);
        }

        .books {
            padding: 0 7.5px;
            flex-wrap: wrap;
        }

        .book {
            width: 33.333%;
            padding: 0 7.5px;
            padding-bottom: 15px;
        }

        .image .main {
            display: block;
            width: 105px;
            height: 140px;
            margin: 0 auto;
            background: rgba(77, 181, 216, 1);
            box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.16);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .image {
            position: relative;
        }
        .image .point {
            position: absolute;
            top: 0;
            left: 0;
            width: 41px;
            height: 41px;
            z-index: 9;
        }

        .title {
            width: 105px;
            height: 32px;
            margin: 8px auto 0 auto;
            font-size: 14px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="sort" v-for="row, rowIndex in sort.listData" data-flex="cross:center">
            <div class="sort-title">{{ row.name }}</div>
            <div class="sort-group" data-flex="cross:center">
                <div v-for="item,index in row.cateLabelList"
                    :class="current.indexOf(item.id) !== -1 ? 'sort-item active' : 'sort-item'"
                    data-flex="cross:center" @click="sort.fn(rowIndex,item.id)">
                    {{ item.labelName }}
                </div>
            </div>
        </div>
        <div class="books" data-flex>
            <div class="book" v-for="item in video.listData" @click="video.fn(item)">
                <div class="image">
                    <img class="point" :src="'../../image/course/video-'+ item.point +'.png'" alt="">
                    <img class="main" :src="item.pic" alt="">
                </div>
                <div class="title">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                // 当前选中的三级分类数组
                current: '',
                // 当前选中的行
                currentRow: '',
                // 当前二级分类 id
                currentLev2Id: '',
                video: {
                    fn: function (item) {
                        fnOpenPublicWin('视频详情', 'video/detail', {
                            isBtn: true,
                            btnType: 'img',
                            btnName: 'ui/share',
                            headerFn: 'headerFn',
                            productsId: item.id,
                            isSlidBack: false
                        })
                    },
                    listData: []
                },
                sort: {
                    fn: function (rowIndex, id) {
                        if(rowIndex !== vm.currentRow) {
                            vm.currentRow = rowIndex;
                            vm.current = [];
                            vm.currentLev2Id = vm.sort.listData[rowIndex].id;
                        };
                        var idIndex = vm.current.indexOf(id);
                        var lev2IdIndex = vm.current.indexOf(vm.currentLev2Id);
                        if(id === vm.currentLev2Id && lev2IdIndex === -1) {
                            vm.current = [id];
                        } else if(id === vm.currentLev2Id && lev2IdIndex !== -1) {
                            vm.current.splice(lev2IdIndex, 1);
                        } else {
                            if(lev2IdIndex !== -1) {
                                vm.current.splice(lev2IdIndex, 1);
                            }
                            if(idIndex === -1) {
                                vm.current.push(id);
                            } else {
                                vm.current.splice(idIndex, 1);
                            }
                        }
                    },
                    listData: []
                }
            },
            watch: {
                current: function() {
                    getData();
                }
            }
        });
        getSortData();
        setTimeout(function() {
            vm.current = [];
        },0)
    }

    function getSortData() {
        var params = {
            topCategoryId: pageParam.topCategoryId
        };
        var url = 'single/pms/productCategory/properties/list';
        var callback = function(data) {
            data.forEach(function(item, index, self) {
                item.cateLabelList.unshift({
                    labelName: '全部',
                    id: item.id
                })
            });
            vm.sort.listData = data;
        };
        MALLGET(url, params, callback);
    }

    function headerFn() {
        fnOpenWin({
            name: 'class_search_win',
            url: '../class/class_search_win.html',
            pageParam: {
                type: 2,
                videoCategoryId: pageParam.topCategoryId
            }
        });
    }

    function getData() {
        var params;
        if(vm.current.indexOf(vm.currentLev2Id) !== -1) {
            params = {
                'categoryId': vm.currentLev2Id,
                'categoryLevel': 2,
                'pageSize': 10,
				'pageNum': 1
            }
        } else if (vm.current.length > 0) {
            getArrayData();
            return;
        } else {
            params = {
                'categoryId': pageParam.topCategoryId,
                'categoryLevel': 1,
                'pageSize': 10,
				'pageNum': 1
            }
        }
        var url = 'single/pms/video/properties/list';
        params.memberType = getUserType();
        var callback = function(data) {
            vm.video.listData = data.records;
        };
        MALLPOST(url, params, callback);
    }

    function getArrayData() {
        var params = {
            'categoryId': vm.currentLev2Id,
            'categoryLevel': 2,
            'pageSize': 10,
            'pageNum': 1,
            'Array': vm.current
        };
        params.memberType = getUserType();
        var url = 'single/pms/video/properties/list';
        var callback = function(data) {
            vm.video.listData = data.records;
        };
        MALLPOSTARRAY(url, params, callback);
    }
</script>

</html>